<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:th="http://www.thymeleaf.org">

<head th:replace="component/head :: head"></head>

<body onload="getCookie();">
	<header th:replace="component/header :: header"></header>

	<!-- Begin page content -->
	<div class="container">
		<div class="col-md-4 offset-md-4">
			<h3 class="text-center">这是我的个人博客</h3>
			<form class="form-horizontal" novalidate
				action="/patterns/user/signin" method="post">
				<div class="form-group">
					<label for="account" class="control-label">账号</label> <input
						type="text" class="form-control" id="user-account" name="account"
						placeholder="账号" required />
					<div class="invalid-feedback">账号不能为空</div>
				</div>
				<div class="form-group">
					<label for="inputPassword" class="control-label">密码</label> <input
						type="password" class="form-control" id="inputPassword-password"
						name="password" placeholder="密码" required />
					<div class="invalid-feedback">密码不能为空</div>
				</div>
				<h6 th:text="${msg}" style="color: red"></h6>
				<div class="form-group">
					<div class="checkbox">
						<label> <input type="checkbox" name="rememberMe">
							记住我 <!--选择是否打勾的选项-->
						</label>
					</div>
					<label class="radio-inline"> <input type="radio"
						name="tag" id="optionsRadios3" value=1
						checked> 普通用户
					</label> <label class="radio-inline"> <input type="radio"
						name="tag" id="optionsRadios4" value=2>
						管理员
					</label>
				</div>
				<div class="form-group">
					<button class="btn btn-primary btn-block" type="submit"
						onclick="login();">登录</button>
				</div>
			</form>
		</div>
	</div>
	<!-- End page content -->

	<footer th:replace="component/footer :: footer"></footer>

	<script>
		var Base64 = {
			_keyStr : "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=",
			encode : function(e) {
				var t = "";
				var n, r, i, s, o, u, a;
				var f = 0;
				e = Base64._utf8_encode(e);
				while (f < e.length) {
					n = e.charCodeAt(f++);
					r = e.charCodeAt(f++);
					i = e.charCodeAt(f++);
					s = n >> 2;
					o = (n & 3) << 4|r >> 4;
					u = (r & 15) <<2|i >> 6;
					a = i & 63;
					if (isNaN(r)) {
						u = a = 64
					} else if (isNaN(i)) {
						a = 64
					}
					t = t + this._keyStr.charAt(s) + this._keyStr.charAt(o)
							+ this._keyStr.charAt(u) + this._keyStr.charAt(a)
				}
				return t
			},
			decode : function(e) {
				var t = "";
				var n, r, i;
				var s, o, u, a;
				var f = 0;
				e = e.replace(/[^A-Za-z0-9+/=]/g, "");
				while (f < e.length) {
					s = this._keyStr.indexOf(e.charAt(f++));
					o = this._keyStr.indexOf(e.charAt(f++));
					u = this._keyStr.indexOf(e.charAt(f++));
					a = this._keyStr.indexOf(e.charAt(f++));
					n = s <<2 | o >> 4;
					r = (o & 15) << 4|u >> 2;
					i = (u & 3) << 6 | a;
					t = t + String.fromCharCode(n);
					if (u != 64) {
						t = t + String.fromCharCode(r)
					}
					if (a != 64) {
						t = t + String.fromCharCode(i)
					}
				}
				t = Base64._utf8_decode(t);
				return t
			},
			_utf8_encode : function(e) {
				e = e.replace(/rn/g, "n");
				var t = "";
				for (var n = 0; n < e.length; n++) {
					var r = e.charCodeAt(n);
					if (r < 128) {
						t += String.fromCharCode(r)
					} else if (r > 127 && r < 2048) {
						t += String.fromCharCode(r >> 6 | 192);
						t += String.fromCharCode(r & 63 | 128)
					} else {
						t += String.fromCharCode(r >> 12 | 224);
						t += String.fromCharCode(r >> 6 & 63 | 128);
						t += String.fromCharCode(r & 63 | 128)
					}
				}
				return t
			},
			_utf8_decode : function(e) {
				var t = "";
				var n = 0;
				var r = c1 = c2 = 0;
				while (n < e.length) {
					r = e.charCodeAt(n);
					if (r < 128) {
						t += String.fromCharCode(r);
						n++
					} else if (r > 191 && r < 224) {
						c2 = e.charCodeAt(n + 1);
						t += String.fromCharCode((r & 31) << 6 | c2 & 63);
						n += 2
					} else {
						c2 = e.charCodeAt(n + 1);
						c3 = e.charCodeAt(n + 2);
						t += String.fromCharCode((r & 15) << 12
								| (c2 & 63) << 6 | c3 & 63);
						n += 3
					}
				}
				return t
			}
		};
		function setCookie() { //设置cookie    
			var account = $("#user-account").val(); //获取用户名信息    
			var password = $("#inputPassword-password").val(); //获取登陆密码信息    
			var checked = $("input[name='rememberMe']").is(':checked'); //获取“是否记住密码”复选框  
			if (checked) { //判断是否选中了"记住密码"复选框    
				$.cookie("account", account, {
					expires : 7
				}); //调用jquery.cookie.js中的方法设置cookie中的用户名    并保存7天 
				$.cookie("password", Base64.encode(password), {
					expires : 7
				}); //调用jquery.cookie.js中的方法设置cookie中的登陆密码，并使用base64进行加密    
			} else {
				$.cookie("account", account, {
					expires : -1
				}); //调用jquery.cookie.js中的方法设置cookie中的用户名    并删除cookie
				$.cookie("password", Base64.encode(password), {
					expires : -1
				}); //调用jquery.cookie.js中的方法设置cookie中的登陆密码，并使用base64进行加密        
			}
		}

		function getCookie() { //获取cookie    
			var account = $.cookie("account"); //获取cookie中的用户名    
			var password = $.cookie("password"); //获取cookie中的登陆密码    
			if (password) { //密码存在的话把“记住用户名和密码”复选框勾选住    
				$("[name='rememberMe']").attr("checked", "true");
			}
			if (account) { //用户名存在的话把用户名填充到用户名文本框    
				$("#user-account").val(account);
			}
			if (password) { //密码存在的话把密码填充到密码文本框    
				$("#inputPassword-password").val(Base64.decode(password));
			}
		}

		function login() {
			//判断是否选中复选框，如果选中，添加cookie  
			var check = $("input[name='rememberMe']").is(':checked'); //获取"是否记住密码"复选框 
			if ($("input[name='rememberMe']").is(':checked')) {
				//添加cookie    
				setCookie();
			}
		}

		// Example starter JavaScript for disabling form submissions if there are invalid fields
		(function() {
			'use strict';
			window.addEventListener('load', function() {
				// Fetch all the forms we want to apply custom Bootstrap validation styles to
				var forms = document.getElementsByClassName('form-horizontal');
				// Loop over them and prevent submission
				var validation = Array.prototype.filter.call(forms, function(
						form) {
					form.addEventListener('submit', function(event) {
						if (form.checkValidity() === false) {
							event.preventDefault();
							event.stopPropagation();
						}
						form.classList.add('was-validated');
					}, false);
				});
			}, false);
		})();
	</script>

	<div th:replace="component/footer-lib"></div>

	<script src="https://cdn.bootcss.com/Base64/1.0.2/base64.js"></script>
	<script
		src="https://cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.js"></script>
</body>

</html>